<template>
  <div class="favorites">
    <header class="header">
      <img
        src="@/assets/images/back_arrow.png"
        alt=""
        class="back-arrow"
        @click="goBack"
      />
      <span class="title">院校收藏夹</span>
    </header>
    <div
      class="school-container"
      ref="schoolContainer"
      @scroll="debouncedCheckScrollBottom"
      v-if="schoolList.length > 0 || isLoading"
    >
      <SchoolItem
        :detail="item"
        v-for="(item, index) in schoolList"
        :key="index"
      />
      <div class="loading" v-if="isLoading">加载中...</div>
    </div>
    <div v-if="schoolList.length == 0 && !isLoading" class="empty">
      <Empty />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import SchoolItem from './components/SchoolItem.vue';
import Empty from '@/components/Empty.vue';
import { useRouter } from 'vue-router';
import antiShake from '@/utils/antiShake.js';
import { campusCollectColleges } from '@/api/collegeSearch';

const router = useRouter();
const schoolList = ref([]);
const schoolContainer = ref(null);
const pageNum = ref(1);
const pageSums = ref(1);
const isLoading = ref(false);
const hasMore = ref(true);

const getCollegeListFn = async () => {
  if (isLoading.value || !hasMore.value) return;
  isLoading.value = true;
  const params = {
    pageSize: 15,
    pageNo: pageNum.value,
  };
  try {
    const res = await campusCollectColleges(params);
    if (res.code === 200) {
      res.data.forEach((item) => {
        item.isCollect = 1;
      });
      pageSums.value = res.pageparam.pages || 1;
      // 追加数据
      if (pageNum.value === 1) {
        schoolList.value = res.data || [];
      } else {
        schoolList.value = [...schoolList.value, ...(res.data || [])];
      }
      // 判断是否还有更多
      if (
        pageNum.value >= pageSums.value ||
        (res.data && res.data.length < params.pageSize)
      ) {
        hasMore.value = false;
      } else {
        pageNum.value += 1;
      }
    } else {
      hasMore.value = false;
    }
  } finally {
    isLoading.value = false;
  }
};

const checkScrollBottom = () => {
  const container = schoolContainer.value;
  if (!container || isLoading.value || !hasMore.value) return;
  const { scrollTop, scrollHeight, clientHeight } = container;
  if (scrollTop + clientHeight >= scrollHeight - 10) {
    getCollegeListFn();
  }
};

const debouncedCheckScrollBottom = antiShake(checkScrollBottom, 100);

const goBack = () => {
  router.go(-1);
};

onMounted(() => {
  // 确保在滚动事件监听中使用防抖后的函数
  if (schoolContainer.value) {
    schoolContainer.value.addEventListener(
      'scroll',
      debouncedCheckScrollBottom
    );
  }

  getCollegeListFn();
});
</script>

<style scoped lang="scss">
.favorites {
  height: 100vh;
  background: linear-gradient(180deg, #e8f9ff 0%, #f4f6f8 100%);
  padding: 0 60px 0 60px;
  overflow: hidden;
  .header {
    display: flex;
    align-items: center;
    padding: 20px 0;
    position: relative;
    .title {
      font-weight: 400;
      font-size: 28px;
      color: #333333;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .back-arrow {
      width: 48px;
      height: 48px;
    }
  }
  .school-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    // 每一行的高度
    grid-auto-rows: 200px;
    gap: 16px;
    overflow-y: scroll;
    height: calc(100vh - 126px);
    padding-bottom: 48px;
    margin-top: 16px;
    border-radius: 16px 16px 0 0;
    /* 隐藏所有浏览器滚动条 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    &::-webkit-scrollbar {
      display: none;
    } /* Chrome/Safari/Opera */
    .loading {
      grid-column: 1 / -1;
      width: 100%;
      text-align: center;
      font-size: 24px;
      color: #666666;
      padding: 0 0 40px 0;
    }
  }
  .empty {
    height: 780px;
  }
}
</style>
